<template>
    <div>
        <h1>watch监听器-基础</h1>
        <input type="text" v-model="num"> {{ num }}
        <p>段位:{{ te }}</p>
        <p>等级:{{ str }}</p>
        <p>
            <button @click="handleClick(1)">升级</button>
            <button @click="handleClick(2)">降级</button>
        </p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            arr:["青铜","白银","黄金","钻石","王者"],
            num:1,
            te:10,
            str:"青铜"
        }
    },
    methods:{
        handleClick(val){
            if(val==1){
                this.te+=5
            }else{
                this.te-=5
            }
        }
    },
    watch:{
        // watch监听器,可以监听一个数据的变化
        // 基本语法:监听的变量会有两个参数一个是新数据一个是旧数据
        // 需要监听的变量(修后的新数据,修改前的旧数据){}
        num(newVal,oldVal){
            console.log(newVal,oldVal)
        },
        te(newVal){
            console.log(newVal,"数据发生改变了")
            // 监听数据的变化,判断等级显示文字
            if(newVal<25){
                this.str=this.arr[0]
            }else if(newVal>=25&&newVal<40){
                this.str=this.arr[1]
            }else if(newVal>=40&&newVal<60){
                this.str=this.arr[2]
            }else if(newVal>=60&&newVal<80){
                this.str=this.arr[3]
            }else{
                this.str=this.arr[4]
            }
        }
    }
}
</script>